<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>p3_边框border 内间距padding</title>
      <style>
        .d1{
          width: 200px;
          height: 200px;
          background-color: #0aa1ed;
          border: 5px solid #f00;
          /*设置单方向的边框*/
          border-top: 10px dotted #0f0;
          /*边框圆角 值越大 角越圆
          长宽为正方形宽高的一半可以切成圆形*/
          border-radius: 100px;
        }
        .d2{
          width: 200px;
          height: 200px;
          border: 5px solid #f0f;
          padding-left: 50px;
          padding-top: 50px;
          /*将盒子面模型计算方案切换为边框盒子
          效果： 边框 内间距 内容都算在预设的width 或height值中*/
          box-sizing: border-box;
          /*外间距不属于元素本身的大小，但是会占据页面布局空间 */
          margin: 60px;
        }
        span{
          border: 3px solid #f00;
        }
        .s2{
          /*行内元素垂直方向的内外间距都不生效  不要用！！！！*/
          padding: 50px;
        }
      </style>
    </head>
    <body>
      <div class="d1">边框</div>
      <div class="d2">内间距的测试2</div>
      <hr>
      <span>span1</span><span class="s2">span2</span><span>span3</span>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dolores ea eaque et facilis impedit iusto
          odio perferendis praesentium quam ut, vitae. Accusantium assumenda consequuntur soluta ut. Id, necessitatibus
          reprehenderit?
      </div>
    </body>
</html>